<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="language" content="en" />
        <style type="text/css">
            body {
                margin: 0px;
                padding: 0px;
            }
            #container {
                width : 600px;
                height: 384px;
                margin: 8px auto;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <!--[if IE]>
        <script type="text/javascript" src="/static/lib/FlashCanvas/bin/flashcanvas.js"></script>
        <![endif]-->
        <script src="<?php echo Yii::app()->request->baseUrl; ?>/scripts/flotr2.min.js"></script>
        <script type="text/javascript">
            (function basic(container) {
                var i=0,j=0,k=0;
                var data = new Array(10);
                for (i=0;i<10;i++){
                    data[i] = [];k=k+2;
                    for(j=0;j<50;j++){
                        var x=(Math.random()<=0.5)?0:1;
                        data[i][j] = [j,x+k];
                    }
                }
                Flotr.draw(container, data, {
                    //colors: ['#00A8F0', '#C0D800', '#CB4B4B', '#4DA74D', '#9440ED'], //=> The default colorscheme. When there are > 5 series, additional colors are generated.
                    //ieBackgroundColor: '#FFFFFF', // Background color for excanvas clipping
                    //title: null,             // => The graph's title
                    //subtitle: null,          // => The graph's subtitle
                    //shadowSize: 4,           // => size of the 'fake' shadow
                    //defaultType: null,       // => default series type
                    //HtmlText: true,          // => wether to draw the text using HTML or on the canvas
                    //fontColor: '#545454',    // => default font color
                    //fontSize: 7.5,           // => canvas' text font size
                    //resolution: 1,           // => resolution of the graph, to have printer-friendly graphs !
                    //parseFloat: true,        // => whether to preprocess data for floats (ie. if input is string)
                    xaxis: {
                        ticks: null,           // => format: either [1, 3] or [[1, 'a'], 3]
                        minorTicks: null,      // => format: either [1, 3] or [[1, 'a'], 3]
                        showLabels: true,      // => setting to true will show the axis ticks labels, hide otherwise
                        showMinorLabels: false,// => true to show the axis minor ticks labels, false to hide
                        labelsAngle: 0,        // => labels' angle, in degrees
                        title: null,           // => axis title
                        titleAngle: 0,         // => axis title's angle, in degrees
                        noTicks: 10,            // => number of ticks for automagically generated ticks
                        minorTickFreq: 5,   // => number of minor ticks between major ticks for autogenerated ticks
                        tickFormatter: Flotr.defaultTickFormatter, // => fn: number, Object -> string
                        tickDecimals: false,    // => no. of decimals, null means auto
                        min: null,             // => min. value to show, null means set automatically
                        max: null,             // => max. value to show, null means set automatically
                        autoscale: false,      // => Turns autoscaling on with true
                        autoscaleMargin: 0,    // => margin in % to add if auto-setting min/max
                        color: null,           // => color of the ticks
                        mode: 'normal',        // => can be 'time' or 'normal'
                        timeFormat: null,
                        timeMode:'UTC',        // => For UTC time ('local' for local time).
                        timeUnit:'millisecond',// => Unit for time (millisecond, second, minute, hour, day, month, year)
                        scaling: 'linear',     // => Scaling, can be 'linear' or 'logarithmic'
                        base: Math.E,
                        titleAlign: 'center',
                        margin: true           // => Turn off margins with false
                    },
                    x2axis: {},
                    yaxis: {
                        ticks: null,           // => format: either [1, 3] or [[1, 'a'], 3]
                        minorTicks: null,      // => format: either [1, 3] or [[1, 'a'], 3]
                        showLabels: true,      // => setting to true will show the axis ticks labels, hide otherwise
                        showMinorLabels: false,// => true to show the axis minor ticks labels, false to hide
                        labelsAngle: 0,        // => labels' angle, in degrees
                        title: null,           // => axis title
                        titleAngle: 90,        // => axis title's angle, in degrees
                        noTicks: 25,            // => number of ticks for automagically generated ticks
                        minorTickFreq: null,   // => number of minor ticks between major ticks for autogenerated ticks
                        tickFormatter: Flotr.defaultTickFormatter, // => fn: number, Object -> string
                        tickDecimals: false,    // => no. of decimals, null means auto
                        min: null,             // => min. value to show, null means set automatically
                        max: null,             // => max. value to show, null means set automatically
                        autoscale: false,      // => Turns autoscaling on with true
                        autoscaleMargin: 0,    // => margin in % to add if auto-setting min/max
                        color: null,           // => The color of the ticks
                        scaling: 'linear',     // => Scaling, can be 'linear' or 'logarithmic'
                        base: Math.E,
                        titleAlign: 'center',
                        margin: true           // => Turn off margins with false
                    },
                    y2axis: {
                        titleAngle: 270
                    },
                    grid: {
                        color: null,      // => primary color used for outline and labels
                        backgroundColor: null, // => null for transparent, else color
                        backgroundImage: null, // => background image. String or object with src, left and top
                        watermarkAlpha: 0.4,   // =>
                        tickColor: '#DDDDDD',  // => color used for the ticks
                        labelMargin: 5,        // => margin in pixels
                        verticalLines: true,   // => whether to show gridlines in vertical direction
                        minorVerticalLines: true, // => whether to show gridlines for minor ticks in vertical dir.
                        horizontalLines: true, // => whether to show gridlines in horizontal direction
                        minorHorizontalLines: null, // => whether to show gridlines for minor ticks in horizontal dir.
                        outlineWidth: 2,       // => width of the grid outline/border in pixels
                        outline : 'nsew',      // => walls of the outline to display
                        circular: false        // => if set to true, the grid will be circular, must be used when radars are drawn
                    },
                    mouse: {
                        track: false,          // => true to track the mouse, no tracking otherwise
                        trackAll: false,
                        position: 'se',        // => position of the value box (default south-east)
                        relative: false,       // => next to the mouse cursor
                        trackFormatter: Flotr.defaultTrackFormatter, // => formats the values in the value box
                        margin: 5,             // => margin in pixels of the valuebox
                        lineColor: '#FF3F19',  // => line color of points that are drawn when mouse comes near a value of a series
                        trackDecimals: 1,      // => decimals for the track values
                        sensibility: 2,        // => the lower this number, the more precise you have to aim to show a value
                        trackY: true,          // => whether or not to track the mouse in the y axis
                        radius: 3,             // => radius of the track point
                        fillColor: null,       // => color to fill our select bar with only applies to bar and similar graphs (only bars for now)
                        fillOpacity: 0.4       // => opacity of the fill color, set to 1 for a solid fill, 0 hides the fill
                    }
                });
            })(document.getElementById("container"));
        </script>
    </body>
</html>